<template>
  <div class="video" ref="videoRef" />
</template>

<script setup>
import {ref, watch, onMounted} from 'vue'
import Player from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'

/* eslint-disable */
const emits = defineEmits(['resourceReady'])
// eslint-disable-next-line no-undef
const props = defineProps({
  //视频路径
  src: {type: String, required: true, default: ''},
  //封面
  poster: {type: String, default: ''},
   //弹幕
  danmu: { type: [Array, String], default: '' },
  //音量
  volume: {type: Number, default: 0.8},
  //记忆播放
  lastPlayTime: {type: Number, default: 0},
  //是否显示控制
  controls: {type: Boolean, default: true},
  //是否直播场景
  isLive: {type: Boolean, default: false},
  //自动播放
  autoplay: {type: Boolean, default: false},
  //循环播放
  loop: {type: Boolean, default: false},
  //初始化显示首帧
  videoInit: {type: Boolean, default: false},
  //画中画
  pip: {type: Boolean, default: false},
  //倍速播放
  playbackRate: {type: [Array, String], default: () => [0.5, 0.75, 1, 1.5, 2]},
  //源切换
  resource: {type: Array, default: () => []},
  //进度条特殊点标记
  progressDot:  {type: Array, default: () => []},
})

const videoRef = ref(null)
const player = ref(null)

onMounted(() => {
  if (props.isLive) {
    initHls()
  } else {
    initPlayer()
  }
})

watch(() => props.src, newSrc => {
  if (player.value.hasStart) {
    player.value.src = newSrc
  } else {
    player.value.start(newSrc)
  }
})

function initPlayer() {
  const p = props
  player.value = new Player({
    el: videoRef.value,
    url: p.src,
    fluid: true,
    poster: p.poster,
    lang: 'zh-cn',
    volume: p.volume,
    autoplay: p.autoplay,
    loop: p.loop,
    videoInit: p.videoInit,
    playbackRate: p.playbackRate,
    lastPlayTime: p.lastPlayTime,
    pip: p.pip,
    controls: p.controls,
    danmu: formatDanmu(p.danmu),
    progressDot: p.progressDot
  })
  player.value.emit('resourceReady', p.resource)
}
function initHls() {
  const p = props
  player.value = new HlsPlayer({
    el: videoRef.value,
    url: p.src,
    fluid: true,
    poster: p.poster,
    isLive: true,
    ignores: ['time','progress'],
    lang: 'zh-cn',
    volume: p.volume,
    pip: p.pip,
    controls: p.controls,
  })
}
function formatDanmu(danmu) {
  if (!danmu) return false
  let newDanmu = []
  danmu.forEach(item => {
    newDanmu.push({
      id: item.id || '',
      start: item.start || 0,
      txt: item.txt || '',
      duration: 10000,
      mode: item.mode || 'scroll',
      style: item.style || {}
    })
  })
  return {comments: newDanmu}
}
</script>

<style scoped lang="scss">
.video:deep(.danmu) > * {
  font-weight: bold;
  @include sc(20px, $color-text);
  text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000;
}
.video:deep(.xgplayer-controls) {
  background-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.3));
}
.video:deep(.xgplayer-progress-tip) {
  border: 0;
  color: $color-text;
  background: rgba(0,0,0,.5);
  line-height: 25px;
  padding: 0 10px;
  border-radius: 25px;
  @include borderRadius(25px);
}
</style>
